<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入标题顶部logo图片 -->
    <link rel="icon" href="../imges/logo.jpg" type="image/x-icon">
    <title>京东(JD.COM)-正品低价、品质保证</title>
    <!-- 引入注册页的css样式 -->
    <link rel="stylesheet" href="../css/registered.css">
    <!-- 引入jQuery文件  -->
    <script src="../js/jquery-3.6.0.js"></script>
    <!-- 引入js文件 -->
    <script src="../js/tools.js"></script>
    <script src="../js/ajax.js"></script>
</head>

<body>
    <!-- 注册顶部栏 -->
    <div class="topbar">
        <div class="leftlogin">
            <img src="../imges3/logo-201305-b.png" alt="" id="leftfigure">
            <span class="word1">欢迎注册</span>
        </div>
        <div class="rightlogin">
            <span id="doubt">已有账号？</span>
            <a href="./login.html" id="word2">请登录⋙</a>
        </div>
    </div>
    <!-- 注册栏 -->
    <div class="thesignup">
        <img src="../imges3/zhuche.png" alt="" id="zhuche">
        <form action="" id="strationform">
            <button id="btn1"><img src="../imges3/账户.png" alt="" id="img1"></button><input type="text" name="userName" id="input1" placeholder="  用户名/手机号/邮箱"><span id="span11" name="nameSpan"></span><br>
            <button id="btn2"> <img src="../imges3/密码.png" alt="" id="img2"></button><input type="password" name="pwd1" id="input2" placeholder="  请设置您的密码"><br>
            <button id="btn3"> <img src="../imges3/密码.png" alt="" id="img3"></button><input type="password" name="pwd2" id="input3" placeholder="  请再次设置您的密码">
            <a id="span22" name="pwdSpan"></a><br>
            <input type="text" name="vc" id="input4" placeholder="请输入验证码">
            <div id="btn4">获取验证码</div>
            <a href="javascript:;" id="sc"></a><br><span id="span33" name="vcSpan">看不清点击换一下</span>
            <input type="checkbox" name="" id="input5"><span id="word1">我已阅读并同意<a href="javascript:;" id="Consent">《京东企业用户注册协议》</a></span><br>
            <div id="btn5">注 册</div>
            <div name="result"></div>
        </form>
    </div>
    <!-- 注册底栏 -->
    <div class="fotbar">
        <ul id="tolist">
            <li id="list"><a href="javascript:;">关于我们 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">联系我们 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">人才招聘 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">商家入驻 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">广告服务 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">手机京东 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">友情链接 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">销售联盟 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">京东社区 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">京东公益 </a><i>|</i></li>
            <li id="list"><a href="javascript:;">English Site</a></li>
        </ul>
    </div>
</body>
<script>
    $('#sc').html(getVC()).click(function() {
        $('#sc').html(getVC());
    })
    $('[name="userName"]').blur(function() {
            selectName();
        })
        // 点击显示验证码
    $('#btn4').click(function() {
            $('#sc').show()
            $('#span33').show()
        })
        // 注册效果
    $('#btn5').click(function() {
        setRegister();
    })
    async function selectName() {
        let name = $('[name="userName"]').val()
        const res = await myPromiseAjax('../server/goods_select.php', 'post', {
            userName: name
        }, 'json');
        console.log(res);

        if (res.code === 1) {
            $('[name="nameSpan"]').html('<span style="color:green">您的账号可以使用</span>')
        } else if (res.code === 0) {
            $('[name="nameSpan"]').html('<span style="color:red">已注册请勿重复</span>')
        }
    }

    async function setRegister() {
        let name = $('[name="userName"]').val();
        let pwd1 = $('[name="pwd1"]').val();
        let pwd2 = $('[name="pwd2"]').val();
        let vc = $('[name="vc"]').val();

        if (pwd1 !== pwd2) {
            $('[name="pwdSpan"]').html('<span style="color:red">您两次输入的密码不一样</span>')
            $('#sc').html(getVC());
            return;
        } else if (pwd1 === pwd2) {
            $('[name="pwdSpan"]').html('<span style="color:green">密码输入一致</span>')
        }
        if (vc.toLowerCase() !== $('#sc').html().toLowerCase()) {
            $('[name="vcSpan"]').html('<span style="color:red">验证码错误</span>')
            $('#sc').html(getVC());
            return;
        } else if (vc.toLowerCase() === $('#sc').html().toLowerCase()) {
            $('[name="vcSpan"]').html('<span style="color:green">验证码正确</span>')
        }
        const res = await myPromiseAjax('../server/goods_register.php', 'post', {
            userName: name,
            userPwd: pwd1
        }, 'json');
        console.log(res.code);
        if (res.code === 1) {
            let time = 5;
            $('[name="result"]').html(`<span>恭喜您注册成功,${time}秒后跳转至首页,<a href="./login.html">跳转至登录页面</a></span>`);
            let t = setInterval(() => {
                time--;
                $('[name="result"]').html(`<span style="color:green">恭喜您注册成功,${time}秒后跳转至首页,<a href="./login.html">跳转至登录页面</a></span>`);
                if (time === 1) {
                    clearInterval(t)
                    window.location.href = './login.html'
                }
            }, 1000)
        }

    }
</script>

</html>